import React, { useState, useEffect } from 'react'
import { Button, SearchBar, Space,Swiper, Toast,Ellipsis,Popup,Stepper } from 'antd-mobile'
import { SearchOutline, SetOutline,LeftOutline,ShopbagOutline,MessageOutline,StarFill } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { Top,Cart } from '@nutui/icons-react'
import { BackTop, Cell } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import '../css/Main.css'
import '../css/Item.css'
import axios from 'axios'

export default function Item() {
    const [visible5, setVisible5] = useState(false)
    let sx=()=>{
        if(visible5==false){
            setGcolor('')
            setGsize('')
            setGnum(1)
        }
    }
    let good= JSON.parse(localStorage.getItem('good'))
    let nav= useNavigate()
    let [uid,setUid]=useState(sessionStorage.getItem('id'))
    let [gid,setGid]=useState(JSON.parse(localStorage.getItem('good'))._id)
    let [name,setName]=useState(JSON.parse(localStorage.getItem('good')).name)
    let [price,setPrice]=useState(JSON.parse(localStorage.getItem('good')).price)
    let [pname,setPname]=useState(JSON.parse(localStorage.getItem('good')).fshop)
    let [img,setImg]=useState(JSON.parse(localStorage.getItem('good')).img[0])
    let [sck,setSck]=useState(JSON.parse(localStorage.getItem('good')).sc)
    let [gnum,setGnum]=useState(1)
    let [gcolor,setGcolor]=useState('')
    let [gsize,setGsize]=useState('')
    let [flg,setFlg]=useState(0)
    let gt=(z)=>{
      setVisible5(true)
      setFlg(z)
    }
    let star=()=>{
      if(good.sc.some(i=>i==uid)){
        return <StarFill style={{fontSize:'40px',color:'red'}} onClick={()=>{sc()}}/>
      }else{
        return <StarFill style={{fontSize:'40px',color:'#bfbfbf'}} onClick={()=>{sc()}}/>
      }
    }
    let sc=()=>{
      if(sck.some(i=>i==uid)){
        let zu=JSON.parse(localStorage.getItem('good'))
        zu.sc.splice(sck.indexOf(uid),1)
        axios.put(`/szh/addscuser?id=${good._id}`,zu).then((res)=>{
        })
        axios.get('/szh/showgoods').then((res)=>{
          let go=res.data.gols
          let a=go.filter(i=>i._id==JSON.parse(localStorage.getItem('good'))._id)
          localStorage.setItem('good',JSON.stringify(a[0]))
      })
      setTimeout(()=>{
        window.location.reload()
      },1500)
      }else{
        let zu=JSON.parse(localStorage.getItem('good'))
        zu.sc.push(uid)
        axios.put(`/szh/addscuser?id=${good._id}`,zu).then((res)=>{
        })
        axios.get('/szh/showgoods').then((res)=>{
            let go=res.data.gols
            let a=go.filter(i=>i._id==JSON.parse(localStorage.getItem('good'))._id)
            localStorage.setItem('good',JSON.stringify(a[0]))
        })
        setTimeout(()=>{
          window.location.reload()
        },1500)
        
      }
      console.log(sck);
      
    }
    let pgood=(z)=>{
      if(z==1){
        axios.post('/szh/addcar',{
          uid:uid,
          name:name,
          img:img,
          price:price,
          gid:gid,
          num:gnum,
          color:gcolor,
          size:gsize,
          having:'待付款',
          pname:pname
        }).then((res)=>{
          Toast.show({
            content: '添加成功',
            icon: <ShopbagOutline />,
          })
        })
        setVisible5(false)
      }else{
        sessionStorage.setItem('gogood',JSON.stringify({
          uid:uid,
          name:name,
          img:img,
          price:price,
          gid:gid,
          num:gnum,
          color:gcolor,
          size:gsize,
          having:'待付款',
          pname:pname,
          id:Date.now()
        }))
        //跳转直接购买页
      }
    }
    const colors = JSON.parse(localStorage.getItem('good')).img
const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      style={{ backgroundImage: `url(${color})`,height:'320px',backgroundSize: 'cover',
      backgroundPosition: 'center',borderBottomRightRadius: '10px',borderBottomLeftRadius: '10px'}}
    >
    </div>
  </Swiper.Item>
))
useEffect(()=>{
  sx()
},[visible5])
  return (
    <div>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '80vh',
        }}
      >
        <div style={{width:'90%',margin:'auto',height:'400px'}}>
          <br />
          <div style={{overflow:'hidden'}}>
            <img src={JSON.parse(localStorage.getItem('good')).img[0]} style={{width:'130px',height:'130px',borderRadius:'12px',float:'left'}} />
            <div style={{width:'130px',height:'130px',borderRadius:'12px',float:'left',margin:'0 14px'}}>
              <h1 style={{marginTop:'25px',color:'red'}}>￥{(JSON.parse(localStorage.getItem('good')).price*gnum).toFixed(2)}</h1>
              <br />
              <p style={{fontSize:'16px',color:'#bfbfbf',marginBottom:'10px'}}>库存{JSON.parse(localStorage.getItem('good')).store}件</p>
              <p style={{fontSize:'16px'}}>已选'{gcolor}' '{gsize}'</p>
            </div>
          </div>
          <br />
          <br />
          <div style={{overflow:'hidden'}}>
            <p style={{fontWeight:'bold'}}>颜色分类</p>
            <br />
            {JSON.parse(localStorage.getItem('good')).color.map(i=>{
              return <div onClick={()=>{setGcolor(i)}} className={gcolor==i?'xz':''} key={i} style={{width:'80px',height:'30px',background:'#f8f8f8',borderRadius:'6px',
              float:'left',margin:'5px 10px',textAlign:'center',lineHeight:'30px',overflow:'hidden'}}>
                <span>{i}</span>
              </div>
            })}
            <br />
            <br />
            <br />
            <br />
            <hr style={{overflow:'hidden',background:'#f8f8f8'}} />
            <br />
            <p style={{fontWeight:'bold'}}>尺码</p>
            <br />
            {JSON.parse(localStorage.getItem('good')).size.map(i=>{
              return <div onClick={()=>{setGsize(i)}} className={gsize==i?'xz':''} key={i} style={{width:'80px',height:'30px',background:'#f8f8f8',borderRadius:'6px',
              float:'left',margin:'5px 10px',textAlign:'center',lineHeight:'30px',overflow:'hidden'}}>
                <span>{i}</span>
              </div>
            })}
            <br />
            <br />
            <br />
            <br />
            <hr style={{overflow:'hidden',background:'#f8f8f8'}} />
          </div>
          <br />
            <p style={{fontWeight:'bold'}}>数量</p>
            <br />
          <Stepper
          allowEmpty={true}
          defaultValue={1}
          value={gnum}
          min={1}
          max={JSON.parse(localStorage.getItem('good')).store}
          onChange={value => {
            setGnum(value)
          }}
        />
        <br />
        <br />
        <button disabled={gsize==''||gcolor==''?true:false} onClick={()=>{pgood(flg)}} style={gsize==''||gcolor==''?{width:'100%',height:'34px',borderRadius:'50px',border:'none',
        fontSize:'18px',fontWeight:'bloder',color:'white',background:'#f5e8de'}:{width:'100%',height:'34px',borderRadius:'50px',border:'none',
        fontSize:'18px',fontWeight:'bloder',color:'white',background:'#f0d5b8'}}>确定</button>
        </div>
      </Popup>
      <BackTop threshold={200}>
        <div
          style={{
            position: 'fixed',
            flexDirection: 'column',
            alignItems: 'center',
            bottom: '120px',
            right: '18px'

          }}
        >
          <Top width={22} height={22}/>
          <div style={{ fontSize: '12px' }}>顶部</div>
        </div>
      </BackTop>
        <div style={{width:'100%',height:'70px',position:'fixed',bottom:'0px',left:'0px',zIndex:'999',background:'white',borderTop:'1px solid #ccc'}}>
            <div style={{width:'50%',height:'70px',float:'left',display:'flex',alignItems:'center',justifyContent:'space-around'}}>
                <div style={{textAlign:'center'}}>
                    <ShopbagOutline style={{fontSize:'40px'}}/>
                    <p>店铺</p>
                </div>
                <div style={{textAlign:'center'}}>
                    <MessageOutline style={{fontSize:'40px'}}/>
                    <p>客服</p>
                </div>
                <div style={{textAlign:'center'}}>
                    {star()}
                    <p>收藏</p>
                </div>
            </div>
            <div style={{width:'50%',height:'78px',float:'left',display:'flex',alignItems:'center',justifyContent:'center'}}>
                <div onClick={()=>{gt(1)}} style={{width:'85px',height:'40px',background:'#f0d5b8',zIndex:'999',textAlign:'center',lineHeight:'40px',
                borderTopLeftRadius:'20px',borderBottomLeftRadius:'20px'}}>
                  <span style={{color:'white',fontWeight:'bolder',fontSize:'15px'}}>加入购物车</span>
                </div>
                <div onClick={()=>{gt(2)}} style={{width:'85px',height:'40px',background:'#c1ab96',textAlign:'center',lineHeight:'40px',
                borderTopRightRadius:'20px',borderBottomRightRadius:'20px'}}>
                  <span style={{color:'white',fontWeight:'bolder',fontSize:'15px'}}>直接购买</span>
                </div>
            </div>
        </div>
        <div style={{width:'100%',height:'320px',boxShadow: '0 10px 20px rgba(0, 0, 0, 0.3)',borderBottomRightRadius: '10px',borderBottomLeftRadius: '10px'}}>
            <div style={{width:'50px',height:'50px',background:'rgba(170,170,170,0.6)',position:'absolute',top:'10px',left:'10px',
            zIndex:'999',borderRadius:'50%',textAlign:'center',lineHeight:'55px'}} onClick={()=>{nav(-1)}}>
                <LeftOutline style={{color:'black',fontSize:'20px',fontWeight:'bolder',opacity:'0.5'}}/>
            </div>
        <Swiper
          loop
          autoplay
        >
          {items}
        </Swiper>
        </div>
        <br />
        <div style={{width:'100%',height:'1220px',background:'#eae9e5'}}>
          <div style={{width:'100%',height:'170px',background:'white',overflow:'hidden'}}>
            <h1 style={{float:'left',margin:'7px 10px',overflow:'hidden',}}>￥ {good.price}</h1>
            <div style={{float:'left',margin:'10px 10px',width:'100px',height:'30px',border:'2px solid #cebbab',
            borderRadius:'5px',textAlign:'center',lineHeight:'30px',fontSize:'17px',color:'#cebbab',overflow:'hidden',}}>品牌直采</div>
            <div style={{width:'93%',height:'80px',margin:'0 auto',overflow:'hidden'}}>
                <span style={{fontSize:'20px',fontWeight:'bolder'}}>{good.name}</span>
            </div>
            <div style={{width:'93%',height:'30px',margin:'0 auto',lineHeight:'30px'}}>
                <span style={{color:'#cebbab',fontSize:'16px',fontWeight:'bolder'}}>·跨境商品·品牌授权·品牌直采</span>
            </div>
          </div>
          <br />
          <div style={{width:'100%',height:'150px',background:'white',overflow:'hidden'}}>
            <div style={{width:'93%',height:'150px',margin:'0 auto',lineHeight:'60px'}}>
                <div style={{width:'23%',height:'40px',float:'left',fontWeight:'bolder'}}>运费</div>
                <div style={{width:'77%',height:'40px',float:'left',fontWeight:'bolder'}}>{good.runprice==0?'免运费':good.runprice}</div>
                <div style={{width:'23%',height:'40px',float:'left',fontWeight:'bolder'}}>说明</div>
                <div style={{width:'77%',height:'40px',float:'left',fontWeight:'bolder'}}>
                    商品税费 | 假一赔十 | 7天无理由退货
                </div>
                <div style={{width:'23%',height:'40px',float:'left',fontWeight:'bolder'}}>参数选择</div>
                <div style={{width:'77%',height:'40px',float:'left',fontWeight:'bolder'}}>
                    {good.color[0]} [{good.size[0]}型号]
                </div>
            </div>
          </div>
          <br />
          <div style={{width:'100%',height:'180px',background:'white',overflow:'hidden'}}>
            <div style={{width:'93%',height:'180px',margin:'0 auto',lineHeight:'60px'}}>
                <h3>品牌信息</h3>
                <div style={{marginTop:'-20px'}}>
                   <div style={{width:'23%',height:'40px',float:'left',fontWeight:'bolder'}}>品牌名</div>
                    <div style={{width:'77%',height:'40px',float:'left',fontWeight:'bolder'}}>{good.title}</div> 
                    <div style={{width:'23%',height:'40px',float:'left',fontWeight:'bolder'}}>原产地</div>
                    <div style={{width:'77%',height:'40px',float:'left',fontWeight:'bolder'}}>{good.city}</div> 
                    <div style={{width:'23%',height:'40px',float:'left',fontWeight:'bolder'}}>风格</div>
                    <div style={{width:'77%',height:'40px',float:'left',fontWeight:'bolder'}}>{good.sty}</div> 
                </div>
            </div>
          </div>
          <br />
          <div style={{width:'100%',height:'600px',background:'white',overflow:'hidden'}}>
            <div style={{width:'93%',height:'600px',margin:'0 auto',lineHeight:'60px'}}>
                <h3>商品详情</h3>
                <img src={good.img[good.img.length-1]} width={'100%'} height={'300px'} />
                    <div style={{textAlign:'center',height:'10px',lineHeight:'30px'}}>
                    <div>
                    <span style={{fontSize:'20px',fontWeight:'bolder'}}>产品信息 INFORMATION</span>
                    </div>
                    <div>
                        <span style={{fontSize:'14px',fontWeight:'bold'}}>名称 {good.name}</span>
                    </div>
                    <div>
                        <span style={{fontSize:'14px',fontWeight:'bold'}}>类型 {good.type}</span>
                    </div>
                    <div>
                        <span style={{fontSize:'14px',fontWeight:'bold'}}>包含颜色 </span>
                        {good.color.map(i=>{
                            return <span key={i} style={{fontSize:'14px',fontWeight:'bold',margin:'0 5px'}}>{i}</span>
                        })}
                    </div>
                    <div>
                    <span style={{fontSize:'14px',fontWeight:'bold'}}>包含型号 </span>
                        {good.size.map(i=>{
                            return <span key={i} style={{fontSize:'14px',fontWeight:'bold',margin:'0 5px'}}>{i}</span>
                        })}
                    </div>
                    <div>
                        <span style={{fontSize:'14px',fontWeight:'bold'}}>产地 {good.city}</span>
                    </div>
                    </div>
                
            </div>
          </div>
        </div>
      
        
    </div>
  )
}

